<template>
    <div class="box">
        <el-tree-v2 :data="data" :props="props" show-checkbox />
    </div>

</template>


<script lang="ts" setup>
import { user } from "@/api";
import { ref } from "vue";
import { useRoute } from "vue-router"
import { CaretRight } from "@element-plus/icons-vue";
const route = useRoute()
interface Tree {
    id: string
    label: string
    children?: Tree[]
}

const getKey = (prefix: string, id: number) => {
    return `${prefix}-${id}`
}

const createData = (
    maxDeep: number,
    maxChildren: number,
    minNodesNumber: number,
    deep = 1,
    key = 'node'
): Tree[] => {
    let id = 0
    return Array.from({ length: minNodesNumber })
        .fill(deep)
        .map(() => {
            const childrenNumber =
                deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren)
            const nodeKey = getKey(key, ++id)
            return {
                id: nodeKey,
                label: nodeKey,
                children: childrenNumber
                    ? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
                    : undefined,
            }
        })
}

const props = {
    value: 'id',
    label: 'label',
    children: 'children',
}
const data = createData(4, 4, 4)

// const id = ref(route.query.id)
// console.log(id.value);


user.listMenuAPI(route.query.id as string).then(res => {
    console.log(res);

})
user.getTreeListAPI().then(res => {
    console.log(res);

})


</script>
  

<style lang="less" scoped>
.box {
    margin: 20px;
}
</style>